<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>购物车</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
	<!--[if lt IE 9]>
		<script src='js/respond.min.js'></script>
		<script src='js/html5shiv.min.js'></script>
	<![endif]-->
	<link rel="stylesheet" href="../assets/reset.css" />
	<link rel="stylesheet" href="../css/less.css" />
	<script type="text/javascript" src="../assets/flexible/flexible.debug.js" ></script>
	<script type="text/javascript" src="../assets/flexible/flexible_css.debug.js" ></script>
</head>
<body>
	<!-- 头部的导航栏 -->
	<header>
		<ul>
			<a href="index.html">
				<li>&lt;</li>
			</a>
			
			<li>购物车</li>
			<li class ="edit">编辑</li>
		</ul>

	</header>
	<!-- 主要部分 -->
	<main>
		<dl class="shopcar">
			<dt class="check"></dt>
			<dt class="imgs">
				<img src="../images/img/img1.png" />
			</dt>
			<dd class="infos">
				<li>2015夏装 波西米亚民族 风碎花吊带连衣裙</li>
				<li>颜色分类：紫罗兰</li>
				<li>尺码：L</li>
				<li class="p-c">
					<p class="price">￥<i>189</i></p>
					<p class="count">X<i>1</i></p>
				</li>
			</dd>
			<dd class="del">删除</dd>
		</dl>
		<dl class="shopcar">
			<dt class="check"></dt>
			<dt class="imgs">
				<img src="../images/img/img2.png" />
			</dt>
			<dd class="infos">
				<li>拼接网纱礼服裙大摆蓬 蓬气质中长连衣裙 </li>
				<li>颜色分类：粉红色</li>
				<li>尺码：L</li>
				<li class="p-c">
					<p class="price">￥<i>189</i></p>
					<p class="count">X<i>1</i></p>
				</li>
			</dd>
			<dd class="del">删除</dd>
		</dl>
		<dl class="shopcar">
			<dt class="check"></dt>
			<dt class="imgs">
				<img src="../images/img/img3.png" />
			</dt>
			<dd class="infos">
				<li>黑白条纹修身T恤字母背 带裙 休闲套装裙 </li>
				<li>颜色分类：黑色</li>
				<li>尺码：M</li>
				<li class="p-c">
					<p class="price">￥<i>189</i></p>
					<p class="count">X<i>1</i></p>
				</li>
			</dd>
			<dd class="del">删除</dd>
		</dl>
		<dl class="shopcar">
			<dt class="check"></dt>
			<dt class="imgs">
				<img src="../images/img/img1.png" />
			</dt>
			<dd class="infos">
				<li>2015夏装 波西米亚民族 风碎花吊带连衣裙</li>
				<li>颜色分类：紫罗兰</li>
				<li>尺码：L</li>
				<li class="p-c">
					<p class="price">￥<i>189</i></p>
					<p class="count">X<i>1</i></p>
				</li>
			</dd>
			<dd class="del">删除</dd>
		</dl>
		<dl class="shopcar">
			<dt class="check"></dt>
			<dt class="imgs">
				<img src="../images/img/img2.png" />
			</dt>
			<dd class="infos">
				<li>拼接网纱礼服裙大摆蓬 蓬气质中长连衣裙 </li>
				<li>颜色分类：粉红色</li>
				<li>尺码：L</li>
				<li class="p-c">
					<p class="price">￥<i>189</i></p>
					<p class="count">X<i>1</i></p>
				</li>
			</dd>
			<dd class="del">删除</dd>
		</dl>
	</main>
	<!-- 底部的模块 -->
	<footer>
		<section class="top">
			<li>
				<span class="checkAll"></span>
				<span>全选</span>
			</li>
			<li>合计<i class="total"></i></li>
			<li>结算(<i class="pay">0</i>)</li>
		</section>
		<section class="bottom">
				<li>商城</li>
				<li>分类</li>
				<li>购物车</li>
				<li>我的</li>
		</section>
	</footer>
	<script type="text/javascript" src="../js/jquery-3.2.1.js" ></script>
	<script>
		$(function(){
			$('header').on('click','.edit',function(){
				$(this).text($(this).hasClass('ed')?'编辑':'完成');
				$(this).toggleClass('ed');
				$('.shopcar').find('.del').toggle();
			})
			$('.shopcar').on('click','.check',function(){
				$(this).toggleClass('checked');
				totals();
				var checks = $('.shopcar').find('.check');
				var checkeds = $('.shopcar').find('.checked');
				if(checks.length == checkeds.length){
					$('.checkAll').addClass('checked');
				}else{
					$('.checkAll').removeClass('checked')
				}
			}).on('click','.del',function(){
				$(this).parent().remove();
				totals();
			})
			$('.checkAll').click(function(){
				$(this).toggleClass('checked');
				if($(this).hasClass('checked')){
					$('.shopcar').find('.check').addClass('checked');
				}else{
					$('.shopcar').find('.check').removeClass('checked');
				}
				
				totals();
			})
			function totals(){
				var num = 0;
				$('.shopcar').find('.checked').siblings('.infos').find('.p-c').each(function(i,v){
					var price = $(v).find('.price i').text();
					var count = $(v).find('.count i').text();
					console.log(price,count)
					num += parseFloat(price) * parseInt(count);
					
				})
				$('.pay').text(num);
			}
		})
	</script>
</body>
</html>